<template>
  <div class="commission-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="商品数据" name="productData">
        <h1 class="title mt-0">推广数据</h1>
        <ul class="promote-data-wrapper jtt-vertical-middle">
          <li class="promote-item">
            <h2 class="data-red">
              {{ $store.state.JTTProductInfo.commissionInfo.commissionShare}}%
            </h2>
            <h2 class="label">佣金比例</h2>
          </li>
          <li class="promote-item">
            <h2 class="data-red">
              ￥{{ $store.state.JTTProductInfo.commissionInfo.commission }}
            </h2>
            <h2 class="label">佣金/元</h2>
          </li>
          <li class="promote-item">
            <h2 class="data-blue">
              {{ $store.state.JTTProductInfo.inOrderCount30Days }}
            </h2>
            <h2 class="label">月推广量/件</h2>
          </li>
          <li class="promote-item">
            <h2 class="data-blue">
              ￥{{
                $store.state.JTTProductInfo.inOrderComm30Days
              }}
            </h2>
            <h2 class="label">月支出佣金/元</h2>
          </li>
          <li class="promote-item">
            <button
              id="transferLink"
              class="transfer-link"
              @click="efficientTransfer"
            >
              高效转链
            </button>
            <a
              :href="
                'https://union.jd.com/proManager/index?keywords=' +
                $store.state.id +
                '&pageNo=1'
              "
              target="_Blank"
            >
              <button class="union-link">联盟转链</button>
            </a>
          </li>
        </ul>
        <h1 class="title">定向计划</h1>
        <el-table
          class="tab-wrapper"
          size="mini"
          :data="$store.state.commissionModule.productPlanList"
          empty-text="暂无推广计划！"
          border
          style="width: 100%"
        >
          <el-table-column prop="planName" label="计划名" width="120">
          </el-table-column>
          <el-table-column prop="planTypeStr" label="类型" width="50">
          </el-table-column>
          <el-table-column prop="checkTypeStr" width="80" label="审核">
          </el-table-column>
          <el-table-column label="佣金比例" :fit="true">
            <template slot-scope="scope">
              <span
                >{{ scope.row.wlHotMincommission }}%~{{
                  scope.row.wlHotMaxCommission
                }}%</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间" width="100">
          </el-table-column>
          <el-table-column label="详情" width="50">
            <template slot-scope="scope">
              <a
                :href="
                  'https://union.jd.com/proManager/planDetails?planId=' +
                  scope.row.planId
                "
              >
                <button class="detail-btn">详情</button>
              </a>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="50">
            <template slot-scope="scope">
              <span
                :style="{
                  color:
                    scope.row.applyStatusStr == '申请通过' ? '#37BF9D' : '#458AE6',
                }"
                >{{ scope.row.applyStatusStr }}</span
              >
            </template>
          </el-table-column>
          <template v-slot:append>
            <login-tip></login-tip>
          </template>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="店铺数据" class="shop-tab-pane" name="shopData">
        <div
          class="shop-info-empty jtt-vertical-middle"
          v-if="!$store.state.userModule.isLogin"
        >
          <span class="iconfont icon-person need-login-icon"></span>
          <span class="need-login-tip">
            <span>点击 </span>
            <a class="login-link" href="https://passport.jd.com/new/login.aspx" target="_blank" >登录京东</a>
            <span> 后，刷新页面查看店铺信息</span>
          </span>
        </div>
        <div class="jtt-clearfix shop-info-exist" v-else-if="$store.state.commissionModule.shopInfo">
          <div class="jtt-fl">
            <h1 class="title">店铺信息</h1>
            <div class="shop-info">
              <h2 class="shop-desc">
                <span class="label">主营类目：</span>
                <span
                  class="content"
                  v-for="(item, index) in c_category"
                  :key="index"
                >
                  {{ item }}
                </span>
              </h2>
              <h2 class="mt-8">
                <span class="label">平均比例：</span>
                <span class="percent"
                  >{{
                     $store.state.commissionModule.shopInfo.averageCommision
                  }}%</span
                >
              </h2>
            </div>
          </div>
          <div class="jtt-fr ml-10">
            <h1 class="title">店铺月推广数据</h1>
            <div class="shop-data-wrapper jtt-clearfix">
              <div class="jtt-fl shop-data-half">
                <div class="data-blue">
                  {{
                    $store.state.commissionModule.shopInfo.inOrderCount30Days
                  }}
                </div>
                <div class="desc">30天引入订单量/件</div>
              </div>
              <div class="line fl"></div>
              <div class="jtt-fl shop-data-half">
                <div class="data-red">
                  ￥{{
                    $store.state.commissionModule.shopInfo.inOrderComm30Days
                  }}
                </div>
                <div class="desc">30天支出佣金/元</div>
              </div>
            </div>
          </div>
        </div>
        <h1 class="title">店铺全部计划</h1>
        <el-table
          class="tab-wrapper"
          size="small"
          :data="$store.state.commissionModule.shopPlanList"
          empty-text="暂无推广计划！"
          border
          style="width: 100%"
        >
          <el-table-column prop="planName" label="计划名" width="90">
          </el-table-column>
          <el-table-column prop="planTypeStr" label="类型" width="50">
          </el-table-column>
          <el-table-column label="佣金比例" width="70">
            <template slot-scope="scope">
              <span
                >{{ scope.row.minWlCommissionRatio }}%~{{
                  scope.row.maxWlCommissionRatio
                }}%</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="inOrderCount30Days" width="60" label="月销量">
          </el-table-column>
          <el-table-column prop="inOrderComm30Days" :fit="true" label="月佣金">
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间" width="80">
          </el-table-column>
          <el-table-column label="申请状态" width="50">
            <template slot-scope="scope">
              <span
                :style="{
                  color: option_status(scope.row.applyStatusStr),
                }"
                >{{ scope.row.applyStatusStr }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="detail" label="详情" width="50">
            <template slot-scope="scope">
              <a
                target="_Blank"
                :href="
                  'https://union.jd.com/proManager/planDetails?planId=' +
                  scope.row.planId
                "
              >
                <button class="detail-btn">详情</button>
              </a>
            </template>
          </el-table-column>

          <template v-slot:append>
            <login-tip></login-tip>
          </template>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <foot></foot>
  </div>
</template>

<script>
import "../../theme/tabs.css";
export default {
  data() {
    return {
      activeName: "productData",
    };
  },
  computed: {
    c_category() {
      return (
        this.$store.state.commissionModule.shopInfo&&this.$store.state.commissionModule.shopInfo.mainCategories &&
        this.$store.state.commissionModule.shopInfo.mainCategories.split(" ")
      );
    },
  },
  methods: {
    //高效转链
    efficientTransfer() {
      if(!this.$store.state.userModule.isLogin){
        alert("请登入京东")
        return
      }
      this.$store
        .dispatch("efficientTransfer")
        .then((res) => {
          return this.$copyText(res.shortCode);
        })
        .then(
          function (e) {
            alert("复制成功");
          },
          function (e) {}
        );
    },
    option_status(option) {
      switch (option) {
        case "无需申请":
          return "#999999";
        case "未申请":
          return "#666666";
        case "已通过":
          return "#37BF9D";
      }
    },
    handleClick(tab, event) {
      if (this.activeName == "shopData") {
        //如果登入了京东
        if (this.$store.state.userModule.isLogin) {
          this.$store.dispatch("commissionModule/checkShopInfo");
          this.$store.dispatch("commissionModule/checkShopPlanList");
        }
      }
    },
    checkDetail(scope) {},
  },
  mounted() {
    this.$store.commit("userModule/chargeIsLogin");
    //如果登入了京东
    if (this.$store.state.userModule.isLogin) {
      this.$store.dispatch("commissionModule/checkProductPlanList");
    }
  },
};
</script>

<style lang="less" scoped>
//修改table样式
.shop-tab-pane /deep/ .el-table th > .cell {
  padding: 0;
}
.shop-tab-pane /deep/ .el-table .cell {
  padding: 0;
}
.commission-container {
  min-height: 100px;
  .title {
    margin-top: 15px;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
  }
  .mt-0 {
    margin-top: 0;
  }
  .promote-data-wrapper {
    margin-top: 9px;
    height: 80px;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    .promote-item {
      width: 20%;
      display: inline-block;
      vertical-align: middle;
      .data-red {
        font-size: 16px;
        text-align: center;
        font-weight: bold;
        color: #f52d36;
      }
      .label {
        margin-top: 6px;
        font-size: 12px;
        font-weight: 400;
        color: #666666;
        text-align: center;
      }
      .data-blue {
        font-size: 16px;
        text-align: center;
        font-weight: bold;
        color: #458ae6;
      }
      .transfer-link {
        margin: 0 auto;
        outline: none;
        border: none;
        display: block;
        width: 80px;
        height: 24px;
        background: linear-gradient(-90deg, #ff6269, #f52d36);
        border-radius: 12px;
        font-size: 12px;
        text-align: center;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
        cursor: pointer;
      }
      .union-link {
        margin: 3px auto 0;
        outline: none;
        border: none;
        display: block;
        width: 80px;
        height: 24px;
        background: linear-gradient(-90deg, #9b74ff, #5f5fff);
        border-radius: 12px;
        font-size: 12px;
        text-align: center;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
        cursor: pointer;
      }
    }
  }
  .tab-wrapper {
    margin-top: 9px;
    .lock-icon {
      display: inline-block;
      margin-bottom: -4px;
      width: 32px;
      height: 16px;
      border: 1px solid #5f5fff;
      border-radius: 3px;
      box-sizing: border-box;
      text-align: center;
      font-size: 12px;
      line-height: 13px;
      font-weight: 400;
      color: #6b63ff;
    }
    .plan-name {
      margin-left: 4px;
      font-size: 12px;
      font-weight: 400;
      color: #666666;
      line-height: 16px;
    }
    .detail-btn {
      outline: none;
      border: none;
      font-size: 12px;
      font-weight: 400;
      color: #458ae6;
      cursor: pointer;
      padding: 0;
      background: none;
    }
    .no-plan-data {
      height: 41px;
      text-align: center;
      line-height: 41px;
      font-size: 12px;
      font-weight: 400;
      color: #666666;
    }
  }

  .shop-info-empty {
    padding-left: 33px;
    margin-top: 15px;
    height: 74px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    span {
      display: inline-block;
      vertical-align: middle;
    }
    .need-login-icon {
      font-size: 38px;
    }
    .need-login-tip {
      line-height: 20px;
      margin-left: 28px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      .login-link {
        vertical-align: middle;
        font-size: 14px;
        line-height: 20px;
        display: inline;
        color: #f52d36;
      }
    }
  }
  .shop-info-exist {
    .title {
      margin-top: 0;
      font-size: 12px;
      font-weight: 400;
      color: #666666;
    }
    .shop-info {
      padding: 19px 17px;
      width: 268px;
      box-sizing: border-box;
      margin-top: 8px;
      background: #ffffff;
      border: 1px solid #eeeeee;
      border-radius: 4px;
    }
    .label {
      font-size: 12px;
      font-weight: 400;
      color: #666666;
    }
    .content {
      margin-right: 4px;
      font-size: 12px;
      font-weight: 400;
      color: #458ae6;
    }
    .mt-8 {
      margin-top: 8px;
    }
    .percent {
      font-size: 12px;
      font-weight: 400;
      color: #f52d36;
    }
    .ml-10 {
      margin-left: 10px;
    }
    .shop-data-wrapper {
      padding: 19px 0;
      width: 268px;
      box-sizing: border-box;
      margin-top: 8px;
      background: #ffffff;
      border: 1px solid #eeeeee;
      border-radius: 4px;
      .line {
        width: 1px;
        height: 39px;
        background: #eeeeee;
      }
      .shop-data-half {
        width: 48%;
        .data-blue {
          font-weight: bold;
          color: #458ae6;
          font-size: 12px;
          text-align: center;
        }
        .data-red {
          font-weight: bold;
          color: #f52d36;
          font-size: 12px;
          text-align: center;
        }
        .desc {
          margin-top: 10px;
          font-size: 12px;
          font-weight: 400;
          color: #666666;
          text-align: center;
        }
      }
    }
  }
}
</style>